<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <th:block th:include="base::header"/>
    <style>
        .img{
            width: 90%;
            position: absolute;
            bottom: 6px;
            border: 1px greenyellow solid;
        }
        .block{
            width: 80px;
            height: 120px;
            float: left;
            padding: 10px;
            margin: 10px;
            /*border: 1px red solid;*/
            position: relative;
        }
        .card{
            border: 1px black solid;
            overflow: hidden;
        }
        #card2{
            padding: 16px;
        }
        #card2 a{
            font-size: 16px;
            line-height: 20px;
            height: 20px;
            display: block;
        }
        #card2 a:hover{
            color: #00FFFF;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form method="post" class="layui-form" lay-filter="form">
            <div class="layui-form-item" >
                <div class="layui-inline x-body layui-form">
                    <input name="orderId" type="text" style="display: none" th:value="${order.orderId}">
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="customId" class="layui-form-label">订购客户
                </label>
                <div class="layui-inline x-body layui-form">
                    <select name="customId" id="customId">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="productId" class="layui-form-label">订购产品
                </label>
                <div class="layui-inline x-body layui-form">
                    <select name="productId" id="productId">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="quantity" class="layui-form-label">订购数量
                </label>
                <div class="layui-inline x-body layui-form">
                    <input type="number" id="quantity" name="quantity" class="layui-input" th:value="${order.quantity}">
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="unitPrice" class="layui-form-label">税前单价
                </label>
                <div class="layui-inline x-body layui-form">
                    <input type="number" id="unitPrice" name="unitPrice" class="layui-input" th:value="${order.unitPrice}">
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="unit" class="layui-form-label">单位
                </label>
                <div class="layui-inline x-body layui-form">
                    <input type="text" name="unit" id="unit" class="layui-input" th:value="${order.unit}">
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="status" class="layui-form-label">订单状态
                </label>
                <div class="layui-inline x-body layui-form">
                    <select name="status" id="status">
                        <option value="">请选择</option>
                        <option value='1'>未开始</option>
                        <option value='2'>进行中</option>
                        <option value='3'>已结束</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="orderDate" class="layui-form-label">订购日期
                </label>
                <div class="layui-inline x-body layui-form">
                    <input readonly type="text" id="orderDate" name="orderDate" class="layui-input" th:value="${#calendars.format(order.orderDate,'yyyy-MM-dd HH:mm:ss')}">
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="requestDate" class="layui-form-label">要求日期
                </label>
                <div class="layui-inline x-body layui-form">
                    <input readonly type="text" id="requestDate" name="requestDate" class="layui-input" th:value="${#calendars.format(order.requestDate,'yyyy-MM-dd HH:mm:ss')}">
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="uploadPic" class="layui-form-label">合同扫描件
                </label>
                <div class="layui-inline">
                    <button type="button" class="layui-btn" id="uploadPic" onclick="toChange1()">上传图片</button>
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="card1" class="layui-form-label">
                </label>
                <div class="layui-row" id="card1">

                </div>
                <input id="file1" type="file"multiple="multiple" style="display: none" onchange="upload(this,'picture')"/>
            </div>
            <div class="layui-form-item">
                <input id="pictures" type="text" name="image" style="display: none">
            </div>
            <div class="layui-form-item" >
                <label for="uploadFile" class="layui-form-label">附件
                </label>
                <div class="layui-inline">
                    <button type="button" class="layui-btn" id="uploadFile" onclick="toChange2()">上传</button>
                </div>
            </div>
            <div class="layui-form-item" >
                <label for="card2" class="layui-form-label">
                </label>
                <div class="layui-row" id="card2">

                </div>
                <input id="file2" type="file"multiple="multiple" style="display: none" onchange="upload(this,'file')"/>
            </div>
            <div class="layui-form-item">
                <input id="files" type="text" name="files" style="display: none">
            </div>

            <div class="layui-form-item" >
                <label for="note" class="layui-form-label">订单要求
                </label>
                <div class="layui-inline">
                    <textarea id="note" name="note" lay-verify="note" style="display: none;"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label"></label>
                <button class="layui-btn" lay-submit lay-filter="add">提交</button>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    var basePath ='[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]';
    var orderId=[[${order.orderId}]]
    var data1=[];
    var data2=[];

    function loadPicture(data) {
        $.each(data,function(index, item) {
            var title=item.substring(item.lastIndexOf("/")+1);
            var div=$("<div class='block'></div>");
            var img=$("<img class='img'>").attr('src',basePath+item).attr('title',title).attr('alt',title);
            div.append(img);
            img.click(function () {
                selected(this)
            })
            $("#card1").append(div).attr('class','card');
        });
    }
    function loadFile(data) {
        $("#card").empty();
        $.each(data,function(index, item) {
            var title=item.substring(item.lastIndexOf("/")+1);
            var inner=$("<a id='file' href=''></a>").append(title).attr('href',basePath+item).attr('name',basePath+item);
            inner.click(function () {
                selected(inner[0]);
            });
            $("#card2").append(inner).attr('class','card');
        });
    }

    layui.use(
        ['form', 'layer','jquery','layedit','util','laydate'],
        function() {
            $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var layedit=layui.layedit;
            var util = layui.util;
            var laydate=layui.laydate;

            $.get("customernames",function(res){
                console.log(res.data);
                $.each(res.data,function (index,item) {
                    var option=$("<option value=''></option>").val(item.customId).append(item.customName);
                    $("#customId").append(option);
                    layui.form.render("select");
                });

            });
            $.get("productnames",function(res){
                console.log(res.data);
                $.each(res.data,function (index,item) {
                    var option=$("<option value=''></option>").val(item.productId).append(item.productName);
                    $("#productId").append(option);
                    //重新渲染
                    layui.form.render("select");
                })
            });

            laydate.render({
                elem: '#orderDate',
                type: 'datetime'
            })
            laydate.render({
                elem: '#requestDate',
                type: 'datetime'
            });

            $.get("loadedit",{"id":orderId},function(order){
                form.val("form", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "customId": order.customId,
                    "productId": order.productId,
                    "status": order.status,
                    "note": order.note
                });
                var index=layedit.build('note',{
                    height: 400,
                    uploadImage: {url: 'img', type: 'post'}
                });//编辑器

                form.verify({
                    note: function (value) {
                        layedit.sync(index);
                    }
                });
            });

            $.get("getpicture",{'id':orderId},function (res) {
                data1=res;
                console.log(data1);
                loadPicture(data1);
                var str=data1.join(",");
                $("#pictures").val(str);
            });
            $.get("getfile",{'id':orderId},function (res) {
                data2=res;
                console.log(data2);
                loadFile(data2);
                var str=data2.join(",");
                $("#files").val(str);
            });

            //监听提交
            form.on('submit(add)',function(data) {
                /*var time=util.toDateString(new Date().getTime(), "yyyy-MM-dd HH:mm:ss");
                data.field.addTime=time;
                data.field.reviseTime=time;*/
                var time=new Date();

                console.log(data.field);

                if(data.field.productId==''||data.field.customId==''){
                    alert("请选择客户名或订购产品名");
                }else{
                    //发异步，把数据提交给php
                    $.post("edit",data.field,function(res){
                        if(res.code==200){
                            layer.alert(res.msg,{
                                icon:1,
                            },function(){
                                //关闭当前frame
                                xadmin.close();
                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            });
                        }
                    });
                }
                //发异步，把数据提交给php
                return false;
            });
        });

    function upload(obj,type){

        if (type=='picture'){
            var path=basePath+"/order/uploadpic";
        }else {
            var path=basePath+"/order/uploadfile";
        }

        var files=$(obj).prop('files');
        if (files.length==0){
            alert('请选择文件');
            return;
        }else{
            var formData=new FormData();
            $.each(files,function (index,item) {
                formData.append('files',item,item.name);
            })
            console.log(formData.get('files'));
            $.ajax({
                url: path,
                type: "POST",
                data: formData,
                // 告诉jQuery不要去设置Content-Type请求头
                contentType: false,
                // 告诉jQuery不要去处理发送的数据
                processData: false,
                success(res) {
                    console.log(res);
                    alert(res.msg);
                    if (type=='picture'){
                        loadPicture(res.data);
                        $.each(res.data,function (index,item) {
                            data1.push(item);
                        });
                        var str=data1.join(",");
                        $("#pictures").val(str);
                    }else {
                        loadFile(res.data);
                        $.each(res.data,function (index,item) {
                            data2.push(item);
                        });
                        var str=data2.join(",");
                        $("#files").val(str);
                    }
                }
            });
        }
    }

    function toChange1() {
        $("#file1").click();
    }
    function toChange2() {
        $("#file2").click();
    }
</script>
</body>
</html>
